<wicket:panel>
	<div class="revision-diff">
		<div wicket:id="revisionsIndexing" class="alert alert-notice alert-light-warning revision-indexing">
			<wicket:svg href="loading" class="icon spin mr-1"/>
			<wicket:t>Revision indexing in progress... (symbol navigation in revisions will be accurate after indexed)</wicket:t>
		</div>
		<!-- disable auto focus here as otherwise we have problems jumping to marked code blocks -->
		<div class="head no-autofocus d-flex align-items-center flex-nowrap">
			<span wicket:id="operations" class="btn-group mr-3">
				<a wicket:id="batchedSuggestions" class="batched-suggestions btn btn-light flex-shrink-0" t:data-tippy-content="Batched suggestions"><wicket:svg href="diff" class="icon icon-lg mr-2"/> <span wicket:id="count" class="mr-1">3</span><wicket:svg href="arrow" class="icon rotate-90"/></a>
				<a wicket:id="option" class="btn btn-light btn-icon btn-lg flex-shrink-0" t:data-tippy-content="Diff options"><wicket:svg href="gear" class="icon"/></a>
				<a wicket:id="downloadPatch" class="btn btn-light btn-icon btn-lg flex-shrink-0" t:data-tippy-content="Download patch"><wicket:svg href="download" class="icon"/></a>
			</span>
			<div class="path-filter flex-grow-1">				
				<form wicket:id="pathFilter">
					<div class="clearable-wrapper">
						<div class="input-group">
                            <input wicket:id="input" class="form-control" spellcheck="false" autocomplete="off" t:placeholder="Filter by path">
							<span class="input-group-append">
								<button wicket:id="submit" class="btn btn-icon btn-outline-secondary" type="submit" t:data-tippy-content="Filter"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
							</span>
						</div>
					</div>
				</form>
			</div>
			<div wicket:id="reviewProgress" class="position-relative review-progress rounded d-flex align-items-center px-2 ml-3">
				<div wicket:id="bar" class="position-absolute rounded"></div>
				<div wicket:id="label" class="font-size-sm ml-auto mr-auto"></div>
			</div>
			<a wicket:id="toggleNavigation" class="btn btn-icon btn-light btn-active-primary ml-3" t:data-tippy-content="Toggle navigation"><wicket:svg href="sidebar" class="icon flip-x"/></a>
		</div>
		<div wicket:id="body" class="body">
			<div wicket:id="feedback"></div>
			<div wicket:id="tooManyFiles" class="alert alert-notice alert-light-warning"></div>
			<div class="detail d-flex align-items-stretch">
				<div wicket:id="comment" class="comment need-width border border-right-0 rounded d-flex overflow-hidden flex-shrink-0 position-sticky mr-3">
					<div class="content flex-grow-1 overflow-hidden d-flex flex-column">
						<div wicket:id="head" class="head d-flex align-items-center px-3 py-2 border-bottom">
							<h6 class="mb-0 mr-2"><wicket:t>Code Comment</wicket:t></h6>
							<span wicket:id="outdated" class="mr-2 badge badge-sm badge-warning"><wicket:t>outdated</wicket:t></span>
							<span wicket:id="status" class="mr-2"></span>
							<a wicket:id="locate" class="btn btn-xs btn-icon btn-hover-primary btn-light locate ml-2 mr-3" t:data-tippy-content="Show commented code snippet"><wicket:svg href="hand" class="icon"></wicket:svg></a>
							<a wicket:id="close" class="ml-auto" t:data-tippy-content="Hide comment"><wicket:svg href="times" class="icon"></wicket:svg></a>
						</div>
						<div wicket:id="body" class="body overflow-auto flex-grow-1 p-3"></div>
					</div>
					<div class="ui-resizable-handle ui-resizable-e flex-shrink-0"></div>
				</div>
				<ul class="diffs list-unstyled flex-grow-1 mb-0"><li wicket:id="diffs" class="diff mb-4"><div wicket:id="diff"></div></li></ul>
				<div wicket:id="noDiffs" class="alert alert-notice alert-light-warning flex-grow-1 mb-0"><wicket:t>No diffs</wicket:t></div>
				<div wicket:id="navigation" class="navigation need-width border border-left-0 rounded d-flex overflow-hidden flex-shrink-0 position-sticky ml-3">
					<div class="ui-resizable-handle ui-resizable-w flex-shrink-0"></div>
					<div wicket:id="content" class="content flex-grow-1 overflow-auto p-3"></div>
				</div>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="newCommentFrag">
		<form wicket:id="form" class="new-comment leave-confirm">
			<div wicket:id="feedback" class="feedback"></div>
			<div class="form-group">
				<div wicket:id="content"></div>
			</div>
			<div class="actions">
				<button wicket:id="save" class="btn btn-sm btn-primary dirty-aware"><wicket:t>Save</wicket:t></button>
				<button wicket:id="cancel" class="btn btn-sm btn-secondary"><wicket:t>Cancel</wicket:t></button>
			</div>
		</form>
	</wicket:fragment>
	<wicket:fragment wicket:id="navTreeNodeFrag">
		<a wicket:id="link"><svg wicket:id="icon" class="icon mr-1"/><span wicket:id="label"/></a>
	</wicket:fragment>
</wicket:panel>